<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>queue事件测试</title>
<link rel="stylesheet" type="text/css" href="http://docs.kissyui.com/kissy-dpl/base/build/css/dpl-pkg.css"/>
<link rel="stylesheet" type="text/css" href="../../assets/demo.css"/>
<script src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy-min.js" charset="utf-8"></script>
</head>
<body>
<article id="doc">
    <h4>queue事件测试</h4>
    <!-- 队列 -->
    <ul id="J_Queue">

    </ul>
    <div class="btn-wrapper">
        <input id="J_Add" type="button" value="添加一个文件">
        <input id="J_DelFirst" type="button" value="删除第一个文件">
        <input id="J_Clear" type="button" value="删除所有文件">
        <input id="J_ChangeStatus" type="button" value="改变第一个文件状态为success">
        <input id="J_ChangeFileData" type="button" value="改变第一个文件名">
    </div>
    <div id="J_Panel" class="event-panel">

    </div>
    <h4>queue事件列表</h4>
    <ul>
        <li><b>render</b>：成功运行后触发</li>
        <li><b>add</b>：添加完文件后触发，如果是批量添加ev不存在file和index数据</li>
        <li><b>remove</b>：删除文件后触发</li>
        <li><b>clear</b>：清理队列所有的文件后触发</li>
        <li><b>fileStatus</b>：当改变文件状态后触发</li>
        <li><b>updateFile</b>：更新文件数据后触发</li>
    </ul>
    <h4>事件面板的代码</h4>
    <pre class='brush: js;'>
        var queue = new Queue('#J_Queue');
        queue.on('render',function(ev){
            addMsg(ev, '组件成功运行！');
        });
        queue.on('add',function(ev){
            addMsg(ev, '向队列添加个文件，文件名为：' + ev.file.name + '，索引值为：' + ev.index);
        });
        queue.on('remove',function(ev){
            addMsg(ev, '删除个文件，文件名为：' + ev.file.name + '，索引值为：' + ev.index);
        });
        queue.on('clear',function(ev){
            addMsg(ev, '清除队列中所有的文件');
        });
        queue.on('fileStatus',function(ev){
            addMsg(ev, '改变文件状态，状态为：' + ev.status + '，索引值为：' + ev.index);
        });
        queue.on('updateFile',function(ev){
            addMsg(ev, '更新文件数据，文件名为：' + ev.file.name + '，索引值为：' + ev.index);
        });

        queue.render();
    </pre>
</article>
<script>
    var S = KISSY, $ = S.Node.all;
    /**
     * 向事件面板添加消息
     * @param evt
     * @param msg
     */
    function addMsg(evt, msg) {
        var $panel = $("#J_Panel");
        $panel.append("<p>事件名称：" + evt.type + "，" + msg + "</p>");
    }
    S.config({
        packages:[
            {
                name:"gallery",
                path:"../../../../../../",
                charset:"utf-8"
            }
        ]
    });
    //加载队列模块
    S.use('gallery/form/1.3/uploader/queue/base,gallery/form/1.3/uploader/themes/default/style.css', function (S, Queue) {
        var queue = new Queue('#J_Queue');
        queue.on('render',function(ev){
            addMsg(ev, '组件成功运行！');
        });
        queue.on('add',function(ev){
            addMsg(ev, '向队列添加个文件，文件名为：' + ev.file.name + '，索引值为：' + ev.index);
        });
        queue.on('remove',function(ev){
            addMsg(ev, '删除个文件，文件名为：' + ev.file.name + '，索引值为：' + ev.index);
        });
        queue.on('clear',function(ev){
            addMsg(ev, '清除队列中所有的文件');
        });
        queue.on('fileStatus',function(ev){
            addMsg(ev, '改变文件状态，状态为：' + ev.status + '，索引值为：' + ev.index);
        });
        queue.on('updateFile',function(ev){
            addMsg(ev, '更新文件数据，文件名为：' + ev.file.name + '，索引值为：' + ev.index);
        });
        //运行队列
        queue.render();

        $('#J_Add').on('click', function (ev) {
            //测试文件数据
            var testFile = {'name':'test.jpg',
                'size':2000,
                'input':{},
                'file':{'name':'test.jpg', 'type':'image/jpeg', 'size':2000}
            };
            //向队列添加文件
            queue.add(testFile);
        });
        $('#J_DelFirst').on('click', function (ev) {
            queue.remove(0);
        });
        $('#J_Clear').on('click', function (ev) {
            queue.clear();
        });
        $('#J_ChangeStatus').on('click', function (ev) {
            queue.fileStatus(0, 'success');
        });
        $('#J_ChangeFileData').on('click', function (ev) {
            queue.updateFile(0, {'name' : 'minghe.jpg'});
        });
    })
</script>
<!-- 代码高亮 START  -->
<link href='../../assets/syntaxhighlighter_3.0.83/sh.css' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="../../assets/syntaxhighlighter_3.0.83/sh.js"></script>
<script type="text/javascript">SyntaxHighlighter.all();</script>
<!-- 代码高亮 END  -->
</body>
</html>
